<template>
  <div>
    <!-- 
        v-bind 指令：
        作用：动态设置 html 标签的属性
        语法：
        基本语法：v-bind：属性名 = '变量'
        简写方式： :属性名 = '变量'
    -->
    <!-- 
      强调：
      title = "小毛驴" 设置标签的属性，值是"小毛驴"的字符串，这种叫做写死
      :title = "msg" 设置标签的属性，值是 msg 的变量，这个值应该从 data 中获取
    -->
    <h1 v-bind:title="msg">猫咪老师</h1>
    <a :href="obj.link" :class="box">{{ obj.name }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '这里是猫咪老师',
      obj: {
        name: '百度',
        link: 'http://www.baidu.com',
      },
    }
  },
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: rgb(152, 248, 152);
}
</style>